<template>
	<m-layout2 :title="pageTitle" gap="25">
		<text v-if="type == 1" slot="titlebar-right" style="color: #222222;" @click="isShow = true">删除</text>
		<m-block class="from" radius="20" gap="0 24">
			<m-fromItem placeholder="请填写联系人" v-model="info.username">
				<view class="item_title" slot="left">
					<text class="from_text1">收货人</text>
				</view>
			</m-fromItem>

			<m-fromItem placeholder="请填写手机号码" v-model="info.userphone">
				<view class="item_title" slot="left">
					<text class="from_text1">手机号码</text>
				</view>
			</m-fromItem>
			<view class="pick-regions flex-between pl-24">
				<view class="flex-between">
					<view class="item_title">
						<text class="from_text1">所在地区</text>
					</view>
					<pick-regions :defaultRegion="info.are" @getRegion="handleGetRegion">
						<view class="input_text">{{info.are || '省市区县、乡镇'}}</view>
					</pick-regions>
				</view>
				<!-- <view class="flex ai-flex-start" @click="chooseLocation">
					<m-icon color="#8a8a8a" type="icon-dingwei"></m-icon>
					<text class="from_text2" style="white-space:nowrap;padding-left: 10rpx;">定位</text>
				</view> -->
			</view>

			<m-fromItem placeholder="请填入详细地址" border="0" v-model="info.useraddress">
				<view class="item_title" slot="left">
					<text class="from_text1">详细地址</text>
				</view>
			</m-fromItem>
		</m-block>
		<!-- 删除弹窗 -->
		<m-dialog :isShow="isShow" :showCancel="true" cancelText="取消" confirmText="确定" @handleCancel="isShow = false"
			@handleConfirm="dialogConfirm">
			<view class="pop_txt">确定要删除该地址吗？</view>
		</m-dialog>

		<m-block class="footer" style="background: unset;" slot="footer" gap="0  25 25">
			<m-button @click="submit">
				确认
			</m-button>
		</m-block>
		<loaction v-if="mapShow" @show="mapShow = $event" />
	</m-layout2>
</template>

<script>
	import { mobile, object } from '@/libs/fn/verify.js' // 引入验证工具库
	import { mapState } from 'vuex'
	import { getCaption, getProvinces } from "@/utils/tools.js" // 引入工具库
	import { AddEditAddress } from '@/api/Users.js'
	import loaction from "@/m-compoents/location/index.vue"
	export default {
		components: { loaction },
		data() {
			return {
				names: '',
				setNameShow: false,
				type: 0,
				pageTitle: "发票信息编辑",
				id: 0,
				isdefualt: 0,
				tagList: this.Cookie.get('addressTag', ['家', '公司']),
				tag: "",
				areid: 0,
				useraddress: "",
				are: [],
				userphone: '',
				username: '',
				isShow: false,
				info: {
					are: '',
					areid: 0,
					id: 0,
					isdefualt: 0,
					tag: "",
					useraddress: "",
					username: "",
					userphone: "",
				},
				mapShow: false,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				addressList: state => state.address.addressList,
				// addressObj: state => state.address.addressObj,
			})
		},
		onLoad({ id }) {
			this.id = id;
			if (id) {
				this.$nextTick(() => {
					let info = this.addressList.filter(item => {
						console.log(item)
						return item.id == id
					})
					this.info = info[0];
				})
			}
		},
		onShow() {},
		methods: {
			Delete(idx) {
				this.tagList.splice(idx, 1)
				this.Cookie.set('addressTag', this.tagList)
			},
			setName() {
				if (!this.names) {
					return this.Toast('请输入标签')
				}
				if (this.names.length > 3) {
					return this.Toast('标签长度不超过三个字')
				}
				this.tagList.push(this.names)
				this.tag = this.names;
				this.setNameShow = false;
				this.names = '';
				this.Cookie.set('addressTag', this.tagList)
			},
			// 设置默认地址监听
			switchChange(e) {
				this.info.isdefualt = e.detail.value ? 1 : 0;
			},
			// 定位页返参监听
			getLocation(location) {
				console.log(location);
				if (location) {
					let latlng = location.latlng; // 坐标
					let poiaddress = location.poiaddress; // 地区
					let poiname = location.poiname; // 详细地址
					// 获取省市区
					this.info.province = location.province;
					this.info.city = location.city;
					if (location.area) {
						this.info.county = location.area;
					} else {
						this.info.county = location.county;
					}
					// 获取地址详情
					this.info.useraddress = getCaption(poiaddress, this.info.county, 1) + poiname;
					console.log(this.info);
				}
			},
			// 省市区三级联动选择的地区
			handleGetRegion(region) {
				this.info.are = region.map(item => {
					return item.name
				}, []);
				this.info.are = this.info.are.toString()
			},
			///////////////////////////////////// 点击事件 ////////////////////////////////////////
			// 地图选择位置
			chooseLocation() {
				this.mapShow = true;
				// this.Jump('/pages/mine/address/h5map/h5map');
			},
			// 确认删除地址
			dialogConfirm() {
				this.isShow = false;
				this.DeleteDeliveryAddress();
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////

			// 确认
			async submit() {
				if (!mobile(this.info.userphone)) { // 是否手机
					return this.Toast('请输入正确的手机号');
				}
				const { success, msg } = await AddEditAddress({
					id: this.info.id,
					"isdefualt": this.info.isdefualt,
					"userid": this.userinfo.userid,
					"tag": this.info.tag,
					"areid": 1,
					"useraddress": this.info.useraddress,
					"are": this.info.are.toString(),
					"userphone": this.info.userphone,
					"username": this.info.username
				})
				this.Toast(msg);
				if (success) {
					await this.sleep(1000)
					this.Jump()
				}
			},
			// 删除收货地址
			async DeleteDeliveryAddress() {
				const success = await DeleteDeliveryAddress({
					addressID: this.info.addressID
				});
			},
		}
	}
</script>

<style lang="scss">
	.from {
		.from-item {
			margin: 0;
		}

		.item_title {
			width: 150rpx;
		}

		.from_text1 {
			font-size: 28rpx;
			font-weight: bold;
			color: #141418;
		}

		.pick-regions {
			padding: 24rpx 0;
			border-bottom: 2rpx solid var(--border);
		}

		.from-item-pcs {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #888888;
		}



		.input_text {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.from_text2 {
			font-size: 28rpx;
			font-weight: 400;
			color: #888888;
		}

		.label {
			background: #FFFFFF;
			border-radius: 60rpx;
			border: 1rpx solid #DDDDDD;
			text-align: center;
			color: #888888;
			padding: 4rpx 35rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
		}


	}

	.from2 {
		.from2-item {
			.item_title {
				width: 150rpx;
			}

			.from_text1 {
				font-size: 28rpx;
				font-weight: bold;
				color: #141418;
			}

			.from_text2 {
				font-size: 28rpx;
				font-weight: 400;
				color: #888888;
			}
		}

		.from2-item:nth-of-type(1) {
			padding-bottom: 24rpx;
			margin-bottom: 24rpx;
			border-bottom: 2rpx solid var(--border);
		}

		.tag-view {
			flex: 1;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 10rpx;

			.label {
				position: relative;
				margin-right: 15rpx;
				height: 44rpx;
				background: #FFFFFF;
				border: 1px solid #999999;
				border-radius: 22rpx;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.m-icon {
					position: absolute;
					right: 5rpx;
				}
			}

			.active {
				border: 1rpx solid var(--theme);
				background: var(--theme);
				;

				text {
					color: #FFF;
				}
			}
		}
	}

	.pop_txt {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
		text-align: center;
		margin-top: 48rpx;
		margin-bottom: 66rpx;
	}

	.setName-box {
		padding: 24rpx;

		.form-Item {
			background: #fff;
			border-radius: 15rpx;
			box-sizing: border-box;

			input {
				border-radius: 15rpx;
				padding: 20rpx 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #111;
				background: #f6f6f6;
			}
		}

		.hint {
			padding: 24rpx 0 0;
			font-size: 24rpx;
			color: var(--text_1);
		}
	}
</style>